<template>
  <a-card :bordered="false">
    <a-form-model ref="smsForm" :model="form" :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
      <a-form-model-item label="平台">
        <a-radio-group v-model="form.type">
          <a-radio value="aliyun"> 阿里云OSS </a-radio>
          <a-radio value="qcloud"> 腾讯云COS </a-radio>
          <a-radio value="qiniu"> 七牛云存储 </a-radio>
          <a-radio value="local"> 本地存储 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <template v-if="form.type == 'aliyun'">
        <a-form-model-item label="存储空间名称(Bucket)">
          <a-input v-model="form.aliyun.bucket" placeholder="请输入存储空间名称" />
        </a-form-model-item>
        <a-form-model-item label="Endponit(自定义域名)">
          <a-input v-model="form.aliyun.domain" />
        </a-form-model-item>
        <a-form-model-item label="是否开启自定义域名">
          <a-radio-group v-model="form.aliyun.CNAME">
            <a-radio value="1"> 开启 </a-radio>
            <a-radio value="0"> 关闭 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="Access Key ID">
          <a-input v-model="form.aliyun.access_key" />
        </a-form-model-item>
        <a-form-model-item label="Access Key Secret">
          <a-input v-model="form.aliyun.secret_key" />
        </a-form-model-item>
      </template>
      <template v-if="form.type == 'qcloud'">
        <a-form-model-item label="存储空间名称(Bucket)">
          <a-input v-model="form.qcloud.bucket" placeholder="请输入存储空间名称" />
        </a-form-model-item>
        <a-form-model-item label="默认域名">
          <a-input v-model="form.qcloud.region" />
        </a-form-model-item>
        <a-form-model-item label="自定义域名">
          <a-input v-model="form.qcloud.domain" />
        </a-form-model-item>
        <a-form-model-item label="SecretId">
          <a-input v-model="form.qcloud.secret_id" />
        </a-form-model-item>
        <a-form-model-item label="SecretKey">
          <a-input v-model="form.qcloud.secret_key" />
        </a-form-model-item>
      </template>
      <template v-if="form.type == 'qiniu'">
        <a-form-model-item label="存储地区">
          <a-radio-group v-model="form.qiniu.zone">
            <a-radio value="0"> 华东 </a-radio>
            <a-radio value="1"> 华北 </a-radio>
            <a-radio value="2"> 华南 </a-radio>
            <a-radio value="3"> 新加坡 </a-radio>
            <a-radio value="4"> 北美 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="存储空间名称(Bucket)">
          <a-input v-model="form.qiniu.bucket" placeholder="请输入存储空间名称" />
        </a-form-model-item>
        <a-form-model-item label="绑定域名(或测试域名)">
          <a-input v-model="form.qcloud.region" />
        </a-form-model-item>
        <a-form-model-item label="AccessKey(AK)">
          <a-input v-model="form.qiniu.secret_ke" />
        </a-form-model-item>
        <a-form-model-item label="SecretKey(SK)">
          <a-input v-model="form.qiniu.secret_key" />
        </a-form-model-item>
      </template>
      <template>
        <a-form-model-item label="是否开启商户通用">
          <a-radio-group v-model="form.mch_hide_oss">
            <a-radio value="1"> 开启 </a-radio>
            <a-radio value="0"> 关闭 </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </template>
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-divider style="margin: 0 0 40px 0" />
        <div style="display: flex; justify-content: center">
          <a-button :loading="btnLoading" type="primary" @click="onSave" style="margin-right: 8px"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>
<script>
import { getUploadConfig, setUploadConfig } from '@/api/saas/upload'

export default {
  name: 'SaasUploadConfig',
  components: {},
  data() {
    return {
      aliVisable: true,
      qiniuVisable: false,
      qcloudVisable: false,
      form: {
        mch_hide_oss: '0',
        aliyun: {
          bucket: null,
          CNAME: null,
          domain: null,
          access_key: null,
          secret_key: null,
          style_api: null
        },
        qiniu: {
          zone: '0',
          bucket: null,
          domain: null,
          access_key: null,
          secret_key: null,
          style_api: null
        },
        qcloud: {
          bucket: null,
          region: null,
          domain: null,
          secret_id: null,
          secret_key: null
        },
        type: 'aliyun'
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    onSave() {
      const hide = this.$message.loading('提交中', 0)
      let { mch_hide_oss, type: storage_type, qiniu, qcloud, aliyun } = this.form
      var params = {
        mch_hide_oss,
        storage_type,
        qiniu,
        qcloud,
        aliyun
      }

      setUploadConfig(params).then(res => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getData: async function() {
      var params = {}
      await getUploadConfig(params).then(res => {
        const data = res.data
        if (data.aliyun) {
          this.form.aliyun = data.aliyun
        }
        if (data.qcloud) {
          this.form.qcloud = data.qcloud
        }
        if (data.qiniu) {
          this.form.qiniu = data.qiniu
        }
        this.form.type = data.storage_type
        this.form.mch_hide_oss = res.mch_hide_oss
      })
    }
  }
}
</script>
<style lang="less" scoped>
.upload-page {
  .required::before {
    content: '*';
    color: red;
  }
  .input-class {
    width: 1100px;
    margin: 10px 8px 25px 0;
  }
  input {
    max-width: 600px;
  }
}
</style>
